<template>
  <div class="create-order">
    <s-header :name="'生成订单'"></s-header>

    <div class="address-wrap">
      <div class="name" @click="goTo">
        <span>{{ address.name }} </span>
        <span>{{ address.phone }}</span>
      </div>
      <div class="address">
        {{ address.province }} {{ address.city }} {{ address.region }} {{ address.detail }}
      </div>
      <van-icon class="arrow" name="arrow"/>
    </div>

    <div class="good">
      <div class="good-item">
        <div class="good-img"><img :src="good.pictures" alt=""></div>
        <div class="good-desc">
          <div class="good-title">
            <span>{{ good.name }}</span>
          </div>
          <div class="good-btn">
            <div class="price">¥{{ good.sellingPrice }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="pay-wrap">
      <div class="price">
        <span>商品金额</span>
        <span>¥{{ good.sellingPrice }}</span>
      </div>
      <van-button @click="handleCreateOrder" class="pay-btn" color="#1baeae" type="primary" block>生成订单</van-button>
    </div>

    <van-popup
        closeable
        :close-on-click-overlay="false"
        v-model:show="showPay"
        position="bottom"
        :style="{ height: '30%' }"
        @close="close"
    >
      <div :style="{ width: '90%', margin: '0 auto', padding: '50px 0' }">
        <van-button :style="{ marginBottom: '10px' }" color="#1989fa" block @click="handlePayOrder(1)">支付宝支付
        </van-button>
        <van-button color="#4fc08d" block @click="handlePayOrder(2)">微信支付</van-button>
      </div>
    </van-popup>

  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from 'vue'
import sHeader from '@/components/SimpleHeader'
import {getAddressDetail} from '@/service/user'
import {createOrder, createSeckillOrder} from '@/service/order'
import {Toast} from 'vant'
import {useRoute, useRouter} from 'vue-router'
import {getGoodByIdWithHeadImg} from "@/service/good";

export default {
  components: {
    sHeader
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      goodId: '',
      good: '',
      address: '',
      showPay: false,
      seckillStr: ''
    })

    onMounted(async () => {
      Toast.loading({message: '加载中...', forbidClick: true});

      const {addressId, goodId} = route.query
      if (!addressId) {
        await router.push({path: '/address', query: {goodId: goodId}})
        return
      }

      const {data: address} = await getAddressDetail({addressId: addressId})
      state.address = address
      state.goodId = goodId
      const {good, seckillStr} = await getGoodByIdWithHeadImg({goodId: goodId})
      state.good = good
      state.seckillStr = seckillStr

      Toast.clear()
    })

    const goTo = () => {
      router.push({path: '/address', query: {goodId: state.goodId, from: 'create-order'}})
    }

    const handleCreateOrder = async () => {
      const params = {
        goodId: state.goodId,
        seckillStr: state.seckillStr
      }
      const data = {
        addressId: state.address.addressId,
        goodId: state.goodId,
        consumerId: 1,
        merchantId: state.good.createUser,
        finalPrice: state.good.sellingPrice
      }

      if (state.seckillStr) {
        await createSeckillOrder(params, data)
      } else {
        await createOrder(data)
      }

      Toast.success('下单成功')
      state.showPay = true
    }

    const close = () => {
      router.push({path: '/order'})
    }

    const handlePayOrder = async (type) => {
      Toast.success('支付成功')
      setTimeout(() => {
        router.push({path: '/order'})
      }, 1000)
    }

    return {
      ...toRefs(state),
      goTo,
      handleCreateOrder,
      close,
      handlePayOrder,
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/style/mixin';

.create-order {
  background: #f9f9f9;

  .address-wrap {
    margin-bottom: 20px;
    background: #fff;
    position: relative;
    font-size: 14px;
    padding: 15px;
    color: #222333;

    .name, .address {
      margin: 10px 0;
    }

    .arrow {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
    }

    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background-size: 80px;
      content: '';
    }
  }

  .good {
    margin-bottom: 120px;
  }

  .good-item {
    padding: 10px;
    background: #fff;
    display: flex;

    .good-img {
      img {
        .wh(100px, 100px)
      }
    }

    .good-desc {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      padding: 20px;

      .good-title {
        display: flex;
        justify-content: space-between;
      }

      .good-btn {
        display: flex;
        justify-content: space-between;

        .price {
          font-size: 16px;
          color: red;
          line-height: 28px;
        }

        .van-icon-delete {
          font-size: 20px;
          margin-top: 4px;
        }
      }
    }
  }

  .pay-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 10px 0;
    padding-bottom: 50px;
    border-top: 1px solid #e9e9e9;

    > div {
      display: flex;
      justify-content: space-between;
      padding: 0 5%;
      margin: 10px 0;
      font-size: 14px;

      span:nth-child(2) {
        color: red;
        font-size: 18px;
      }
    }

    .pay-btn {
      position: fixed;
      bottom: 7px;
      right: 0;
      left: 0;
      width: 90%;
      margin: 0 auto;
    }
  }
}
</style>
